<template>
	<view class="container">
		<view class="bannder rela">
			<view class="flex j-between a-center">
				<view class="flex col j-center a-center">
					<view class="num">1,234</view>
					<view class="name">总收益</view>
				</view>
				<u-line length="32" color="#fff" direction="col"></u-line>
				<view class="flex col j-center a-center">
					<view class="num">32</view>
					<view class="name">我的推广人</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="panel flex a-center j-between" v-for="item,i in list" :key="i">
				<view class="flex a-center">
					<view class="t-pic">
						<image class="image" :src="item.src"></image>
					</view>
					<view class="ctt">
						<view class="flex j-between a-center">
							<view class="name ecllipse">{{item.name}}</view>
						</view>
						<view class="statics">
							<view class="flex j-between a-center">
								<view>{{item.time}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="submit flex j-center a-center">+1000</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			list:[
				{time:'2021-12-21',name:'188****1234',src:'https://cdn.uviewui.com/uview/common/logo.png'},
				{time:'2021-12-21',name:'188****1234',src:'https://cdn.uviewui.com/uview/common/logo.png'},
				{time:'2021-12-21',name:'188****1234',src:'https://cdn.uviewui.com/uview/common/logo.png'},
				{time:'2021-12-21',name:'188****1234',src:'https://cdn.uviewui.com/uview/common/logo.png'},
				{time:'2021-12-21',name:'188****1234',src:'https://cdn.uviewui.com/uview/common/logo.png'}
			]
		}
	}
}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.bannder{background: linear-gradient(226deg, #428BF7 0%, #246FDD 100%);overflow: hidden;height: 200rpx;
	box-shadow: 0px 12rpx 12rpx rgba(36, 111, 221, 0.16);border-radius: 16rpx;padding: 48rpx 140rpx;
	margin-top: 18rpx;color: #FFF;
	.num{font-size: 36rpx;font-weight: bold;}
	.name{font-size: 24rpx;margin-top: 24rpx;}
}
.list{color: #333;margin-top: 8rpx;
	.panel{background-color: #fff;border-radius: 16rpx;padding: 32rpx 24rpx;margin-top: 24rpx;
		.t-pic{width: 88rpx;height: 88rpx;border-radius: 16rpx;overflow: hidden;margin-right: 24rpx;}
		.name{font-size: 32rpx;color: #333;}
		.statics{color:#999;font-size: 24rpx;margin-top: 20rpx;height: 34rpx;}
		.submit{color: #333;font-size: 32rpx;color: #333;font-weight: bold;}
	}
}
</style>
